<style lang="less">
  @import './union.less';
</style>
<template>
  <div>
    <div id="first" v-show="isEditing==1">
      <Form :model="seachForm" inline :label-width="80" >

      <FormItem prop="id" :label="$t('id')">
        <Input v-model="seachForm.id" placeholder="请输入查询文字"></Input>
      </FormItem>

      <FormItem prop="name" :label="$t('name')">
        <Input v-model="seachForm.name" placeholder="请输入查询文字"></Input>
      </FormItem>
      <FormItem prop="verify" :label="$t('verify')">
        <Input v-model="seachForm.verify" placeholder="请输入查询文字"></Input>
      </FormItem>
      <FormItem prop="intro" :label="$t('intro')">
        <Input v-model="seachForm.intro"  placeholder="请输入查询文字"></Input>
      </FormItem>
      <FormItem>
        <Button icon="ios-search" @click="seacherSubmit('seacherForm')">查询</Button>
      </FormItem>
      </Form>
      <ButtonGroup >
      <Button icon="ios-add" @click="btnAddClick1">新增</Button>
      <Button icon="ios-create" @click="btnEditClick1" :disabled="!subjectCurrentRow">修改</Button>
      <Button icon="ios-trash" @click="btnDelClick1" :disabled="!subjectCurrentRow">删除</Button>
      </ButtonGroup>
      <Table  border highlight-row ref="subjectCurrentRow" @on-current-change="tableCurrentChange1" :columns="subjectColumns" :data="subjectDatas"></Table>
    </div>
    <div id="second" v-show="isEditing==2">
     <Form  :model="subjectDataForm" :label-width="80">
      <FormItem prop="id" :label="$t('id')">
        <Input style="width: 100px" readonly="true" v-model="subjectDataForm.id" placeholder="Don't need to enter"></Input>
      </FormItem>
      <FormItem prop="name" :label="$t('name')">
        <Input style="width: 150px" v-model="subjectDataForm.name" placeholder="Enter something..."></Input>
      </FormItem>
      <FormItem prop="verify" :label="$t('verify')">
      <InputNumber :max="1" :min="0" v-model="subjectDataForm.verify" readonly></InputNumber>
      </FormItem>
       <FormItem prop="price" :label="$t('price')">
      <InputNumber :max="30" :min="0" v-model="subjectDataForm.price"></InputNumber>
      </FormItem>
       <FormItem prop="intro" :label="$t('intro')">
        <Input v-model="subjectDataForm.intro" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="btnSaveClick2">保存</Button>
        <Button style="margin-left: 8px" @click="btnCancelClick2">取消</Button>
      </FormItem>
     </Form>
    </div>
    <div id="extraSecond" v-show="isEditing==2&&(!isNew)">
     <ButtonGroup >
      <Button icon="ios-add" @click="btnAddClick2">新增</Button>
      <Button icon="ios-create" @click="btnEditClick2" :disabled="!chapterCurrentRow">修改</Button>
      <Button icon="ios-trash" @click="btnDelClick2" :disabled="!chapterCurrentRow">删除</Button>
      </ButtonGroup>
     <Table  border highlight-row ref="chapterCurrentRow" @on-current-change="tableCurrentChange2" 
     :columns="chapterColumns" :data="chapterDatas"></Table>
    </div>
    <div id="third" v-show="isEditing==3">
     <Form  :model="chapterDataForm" :label-width="80">
      <FormItem prop="id" :label="$t('id')">
        <Input style="width: 100px" readonly="true" v-model="chapterDataForm.id" placeholder="Don't need to enter"></Input>
      </FormItem>
      <FormItem prop="name" :label="$t('name')">
        <Input style="width: 150px" v-model="chapterDataForm.name" placeholder="Enter something..."></Input>
      </FormItem>
       <FormItem prop="intro" :label="$t('intro')">
        <Input v-model="chapterDataForm.intro" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="btnSaveClick3">保存</Button>
        <Button style="margin-left: 8px" @click="btnCancelClick3">取消</Button>
      </FormItem>
     </Form>
    </div>
    <div id="extraThird" v-show="isEditing==3&&(!isNew)">
     <ButtonGroup >
      <Button icon="ios-add" @click="btnAddClick3">新增</Button>
      <Button icon="ios-create" @click="btnEditClick3" :disabled="!knowledgepointCurrentRow">修改</Button>
      <Button icon="ios-trash" @click="btnDelClick3" :disabled="!knowledgepointCurrentRow">删除</Button>
      </ButtonGroup>
     <Table  border highlight-row ref="knowledgepointCurrentRow" @on-current-change="tableCurrentChange3" 
     :columns="knowledgepointColumns" :data="knowledgepointDatas"></Table>
    </div>
    <div id="fourth" v-show="isEditing==4">
      <Form  :model="knowledgepointDataForm" :label-width="80">
        <FormItem prop="id" :label="$t('id')">
        <Input v-model="knowledgepointDataForm.id" readonly="true" placeholder="Enter something..."></Input>
      </FormItem>
      <FormItem prop="name" :label="$t('name')">
        <Input v-model="knowledgepointDataForm.name" placeholder="Enter something..."></Input>
      </FormItem>
       <FormItem prop="intro" :label="$t('intro')">
        <Input v-model="knowledgepointDataForm.intro" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="btnSaveClick4">保存</Button>
        <Button style="margin-left: 8px" @click="btnCancelClick4">取消</Button>
      </FormItem>
    </Form>
    </div>
 </div>
 
</template>
<script>
import { getSubjectList, getSubject, addSubject, updateSubject, deleteSubject } from '@/api/subjects'
import {getChapterList,getChapter, addChapter, updateChapter, deleteChapter } from '@/api/chapters'
import { getKnowledgepointList, getKnowledgepoint, addKnowledgepoint, updateKnowledgepoint, deleteKnowledgepoint } from '@/api/knowledgepoints'
export default {
  name: 'subjects',
  data() {
    return {
      message: 'Hello Vue!',
      isEditing:1,
      isNew:false,
      seachForm: //搜索课程
      {
        id:'',
        name: '',
        verify: '',
        intro: ''
      },
      extraSeachForm: //课程——章节——知识点
       {
        subjectId:'',
        chapterId:'',
        knowledgepointId:'',
       },
    subjectColumns:
    [
         {

        type: 'index',
        width: 60,
        align: 'center'
      }, 
      {
        title: this.$t('id'),
        key: 'id'
      },
       {
        title: this.$t('name'),
        key: 'name'
      },
      {
        title: this.$t('verify'),
        key: 'verify'
      }, {
       title: this.$t('price'),
        key: 'price'
      }, {
       title: this.$t('intro'),
        key: 'intro'
      }
    ],
    chapterColumns:
    [
           {
        type: 'index',
        width: 60,
        align: 'center'
           }, 
         {
        title: this.$t('id'),
        key: 'id'
      }, 
      {
        title: this.$t('name'),
        key: 'name'
      },
       {
       title: this.$t('id'),
        key: 'id'
      }, 
      {
       title: this.$t('intro'),
        key: 'intro'
      }
    ],
    knowledgepointColumns: 
    [
      {    
        type: 'index',
        width: 60,
        align: 'center'
      }, 
       {
        title: this.$t('id'),
        key: 'id'
      }, 
      {
        title: this.$t('name'),
        key: 'name'
      }, 
      {
       title: this.$t('subjectId'),
        key: 'subjectId'
      }, 
       {
        title: this.$t('chapterId'),
        key: 'chapterId'
      }, 
      {
       title: this.$t('intro'),
        key: 'intro'
      }
    ],
      subjectDataForm: {},//                       当前选中
      chapterDataForm: {},//
      knowledgepointDataForm: {},//
      subjectCurrentRow: null,                 //     当前行
      chapterCurrentRow:null,
      knowledgepointCurrentRow:null,
      subjectDatas:[],//课程列表                   列表
      chapterDatas:[],//章节索引列表
      knowledgepointDatas:[],//知识点索引列
    }  
  },
  created() {
    console.log('created message is: ' + this.message);
    this.querySubjectList();
  },
  mounted() {
    console.log('mounted message is: ' + this.message);
  },
  methods: {
    seacherSubmit: function() {
      console.log("我日你滴妈");
      console.log(this.seacherForm);
      console.log("over");
      this.querySubjectList();
    },
    querySubjectList: function() //课程列表
    {
      var queryParams = 
      {
        id:this.seachForm.id, 
        name: this.seachForm.name,
        verify: this.seachForm.verify,
        intro: this.seachForm.intro,
       
      };
      getSubjectList(queryParams).then
      (res =>
       {
        this.subjectDatas = res.data.rows;
      }
      );
    },
    queryChapterList: function() //章节列表
    {
      var queryParams = 
      {
        subjectId:this.subjectDataForm.id,
      };
      getChapterList(queryParams).then(res => {//
        this.chapterDatas = res.data.rows;
       
      });
    },
    queryKnowledgepointList: function() //知识点列表
     {                                  
      var queryParams = //searchform传递检索内容
      {
        chapterId:this.chapterDataForm.id,
       
      };
      getKnowledgepointList(queryParams).then(res => {
        this.knowledgepointDatas = res.data.rows;
      });
    },
    
     //first 课程列表
    tableCurrentChange1: function(currentRow, oldCurrentRow) {
      this.subjectCurrentRow = currentRow;
    },
    btnAddClick1: function() 
    {
      this.subjectDataForm = {};
      this.chapterDatas=[];
      this.isEditing = 2;
      this.isNew=true;
    },
    btnEditClick1: function() 
    {
      this.subjectDataForm = this.subjectCurrentRow;
      this.queryChapterList();//显示课程所含的章节
      this.isEditing = 2;
    },
    btnDelClick1: function() {
      this.$Modal.confirm({
        title: '删除',
        content: '确定要删除选中的信息吗?',
        onOk: () => {
          this.delData();
        }
      });
    },
    delData1: function() {
      deleteSubject(this.subjectCurrentRow.id).then(res => {
        if (res.data&& res.data.affectedRows > 0) {
          this.$Message.success('删除成功!');
          this.queryChapterList();
        } else {
          this.$Message.error('删除失败!');
        }
      });
    },
    //second 课程内容
    btnSaveClick2: function() {
      if (this.subjectDataForm.id) {
        updateSubject(this.subjectDataForm).then(res => {    //去掉id
          if (res.data && res.data.affectedRows > 0) 
          {
            this.$Message.success('保存成功!');
            this.querySubjectList();
            this.isEditing = 1;
            this.isNew=false;
          } else 
          {
            this.$Message.error(res.error);
          }
        });
      } else {
        addSubject(this.subjectDataForm).then(res => {
          if (res.data && res.data.affectedRows > 0) 
          {
            this.$Message.success('保存成功!');
            this.querySubjectList();
            this.isEditing = 1;
            this.isNew=false;
          } else {
            this.$Message.error(res.error);
          }
        });
      }
    },
    btnCancelClick2: function() {
      this.isEditing = 1;
     this.isNew=false;
    },
    //extra second 章节列表
     tableCurrentChange2: function(currentRow, oldCurrentRow) {
      this.chapterCurrentRow = currentRow;
    },
    btnAddClick2: function() 
    {
      this.queryKnowledgepointDataForm= {};
      this.knowledgepointDatas=[];
      this.isEditing = 3;
      this.isNew=true;
    },
    btnEditClick2: function() 
    {
      this.chapterDataForm = this.chapterCurrentRow;
      this.queryKnowledgepointList();
      this.isEditing = 3;
    },
    btnDelClick2: function() {
      this.$Modal.confirm({
        title: '删除',
        content: '确定要删除选中的信息吗?',
        onOk: () => {
          this.delData2();
        }
      });
    },
    delData2: function() {
      deleteChapter(this.chapterCurrentRow.id).then(res => {
        if (res.data&& res.data.affectedRows > 0) {
          this.$Message.success('删除成功!');
          this.queryChapterList();
        } else {
          this.$Message.error('删除失败!');
        }
      });
    },
    //third 章节内容
    btnSaveClick3: function() {
      if (this.chapterDataForm.id) 
      {
        updateChapter(this.chapterDataForm).then
        (res => 
         {    //去掉id
          if (res.data && res.data.affectedRows > 0) {
            this.$Message.success('保存成功!');
            this.queryKnowledgepointList();
            this.isEditing = 2;
            this.isNew=false;
          } else {
            this.$Message.error(res.error);
          }
         }
        );
      } 
      else 
      {
        addChapter(this.chapterDataForm).then(res => {
          if (res.data && res.data.affectedRows > 0) {
            this.$Message.success('保存成功!');
            this.queryKnowledgepointListt();
            this.isEditing = 2;
            this.isNew=false;
          } else {
            this.$Message.error(res.error);
          }
        });
      }
    },
    btnCancelClick3: function() {
      this.isEditing = 2;
      this.isNew=false;
    },
    //extra third 知识点列表
     tableCurrentChange3: function(currentRow, oldCurrentRow) {
      this.knowledgepointCurrentRow = currentRow;
    },
    btnAddClick3: function() 
    {
      this.queryKnowledgepointDataForm= {};
     // this.knowledgepointDatas=[];
      this.isEditing = 4;
    },
    btnEditClick3: function() 
    {
      this.knowledgepointDataForm = this.knowledgepointCurrentRow;
      //this.queryKnowledgepointList();
      this.isEditing = 4;
    },
    btnDelClick3: function() {
      this.$Modal.confirm({
        title: '删除',
        content: '确定要删除选中的信息吗?',
        onOk: () => {
          this.delData3();
        }
      });
    },
    delData3: function() {
      deleteKnowledgepoint(this.knowledgepointCurrentRow.id).then(res => {
        if (res.data&& res.data.affectedRows > 0) {
          this.$Message.success('删除成功!');
          this.queryChapterList();
        } else {
          this.$Message.error('删除失败!');
        }
      });
    },
     //fourth 知识点内容
    btnSaveClick4: function() {
      if (this.knowledgepointDataForm.id) {
        updateKnowledgepoint(this.knowledgepointDataForm).then(res => 
        {    //去掉id
          if (res.data && res.data.affectedRows > 0) 
          {
            this.$Message.success('保存成功!');
            this.queryKnowledgepointList();
            this.isEditing = 3;
          } else 
          {
            this.$Message.error(res.error);
          }
        });
      } else {
        addKnowledgepoint(this.knowledgepointDataForm).then(res => {
          if (res.data && res.data.affectedRows > 0) 
          {
            this.$Message.success('保存成功!');
            this.queryKnowledgepointListt();
            this.isEditing = 3;
          } else {
            this.$Message.error(res.error);
          }
        });
      }
    },
    btnCancelClick4: function() {
      this.isEditing = 3;
    },
  }
}

</script>